<%@page import="com.blog.bean.Blog"%>
<%@page import="com.blog.bean.BlogMsg"%>
<%@page import="java.util.List"%>
<%@page import="com.blog.bean.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	User user = (User)session.getAttribute("loginUser");
	List<Blog> historyBlogs = (List<Blog>)session.getAttribute("history_blog");
	List<Blog> allBlogs = (List<Blog>)session.getAttribute("all_blog_list");
	List<BlogMsg> blogsMsg = (List<BlogMsg>)session.getAttribute("all_blog_list_msg");
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MyBlog</title>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="source/css/bootstrap.min.css" >
	<link rel="stylesheet" href="source/css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="source/css/htmleaf-demo2.css">
	<link rel="stylesheet" href="source/css/style_index.css"> <!-- Resource style -->
	<script src="source/js/modernizr.js"></script> <!-- Modernizr -->
	
	
	<style type="text/css">
		.poster-main{
			position: relative;
			margin: 10px auto;
			width:100%;
			height:200px;
		}
		.poster-main .poster-list .poster-item{
			position: absolute;
			left: 0;
			top: 0;
		}
		.poster-main .poster-btn{
			position: absolute;
			top: 0;
			cursor: pointer;
		}
		.poster-main .poster-prev-btn{
			left: 0;
			background: url("source/images/btn_l.png") no-repeat center center;
		}
		.poster-main .poster-next-btn{
			right: 0;
			background: url("source/images/btn_r.png") no-repeat center center;
		}
	</style>
	<style type="text/css">
		.glyphicon { margin-right:5px; }
		.btn-wrapper{
			padding: 1em 0;
		}
		.thumbnail
		{
		    margin-bottom: 20px;
		    padding: 0px;
		    -webkit-border-radius: 0px;
		    -moz-border-radius: 0px;
		    border-radius: 0px;
		}

		.item.list-group-item
		{
		    float: none;
		    width: 100%;
		    background-color: #fff;
		    margin-bottom: 10px;
		}
		.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
		{
		    background: #428bca;
		}

		.item.list-group-item .list-group-image
		{
		    margin-right: 10px;
		}
		.item.list-group-item .thumbnail
		{
		    margin-bottom: 0px;
		}
		.item.list-group-item .caption
		{
		    padding: 9px 9px 0px 9px;
		}
		.item.list-group-item:nth-of-type(odd)
		{
		    background: #eeeeee;
		}

		.item.list-group-item:before, .item.list-group-item:after
		{
		    display: table;
		    content: " ";
		}

		.item.list-group-item img
		{
		    float: left;
		}
		.item.list-group-item:after
		{
		    clear: both;
		}
		.list-group-item-text
		{
		    margin: 0 0 11px;
		}
	</style>
	
</head>
<body>
	<header class="cd-main-header animate-search" >
		<div class="cd-logo">
		<a href="index"><img height="45px" src="source/img/logo.svg" alt="myblog首页"></a>
		
		</div>

		<nav class="cd-main-nav-wrapper">
			<a id="a_search" href="#search" class="cd-search-trigger cd-text-replace">Search</a>
			
			<ul class="cd-main-nav">
				<li><a href="#0">最新</a></li>
				<li><a href="#0">最热</a></li>
				<li><a class="disabled">||</a></li>
				<li><a href="searchBlog?type=java">java</a></li>
				<li><a href="searchBlog?type=python">python</a></li>
				<li><a href="searchBlog?type=php">php</a></li>
				<li><a href="searchBlog?type=移动开发">移动开发</a></li>
				<li><a href="searchBlog?type=大数据">大数据</a></li>
				<li><a href="searchBlog?type=物联网">物联网</a></li>
				<li><a class="disabled">||</a></li>
				<%
					if(user == null){
						out.print("<li><a  href='login'>登录/注册</a></li>");
						
					}else{
						
						out.print("<li><div class='btn-group'><button type='button' class='btn btn-info dropdown-toggle' data-toggle='dropdown'  >"+
								user.getName()+"<span class='caret'></span></button><ul class='dropdown-menu'><li><a href='userBlog'>我的主页</a></li><li><a href='createBlog'>创作中心</a></li>"+
								"<li><a href='#'>我的圈子</a></li> <li role='separator' class='divider'></li><li><a href='removeLogin'>退出登录</a></li>"+
								" </ul></div></li>");
						
					}
				%>
			</ul> <!-- .cd-main-nav -->
		</nav> <!-- .cd-main-nav-wrapper -->

		<a href="#0" class="cd-nav-trigger cd-text-replace">Menu<span></span></a>
	</header>
	
	<main style="background-color:#62AFFE;" >
		
		
		
			
	
		<!-- your content here -->
		
		<div>
			 
			<div style="margin-left:auto;margin-right:auto;" >
			
			<div class="container" style="background-color:#62AFFE;">
			
			<div class="btn-wrapper">
		        <strong></strong>
		        <div class="btn-group">
		            <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list">
		            </span>列表布局</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span
		                class="glyphicon glyphicon-th"></span>网格布局</a>
		        </div>
		    </div>
			 
			<div id="products"  class="row list-group">
			<% for(int i=0;i<allBlogs.size();i++){%>
		        <div class="item  col-xs-4 col-lg-4">
		            <div class="thumbnail">
		                <img class="group list-group-image" src="source/img/user.png" alt="" />
		                <div class="caption">
		                    <h4 class="group inner list-group-item-heading">
		                        <%=allBlogs.get(i).getTitle() %></h4>
		                    <p class="group inner list-group-item-text">
		                        <a href="showBlog?id=<%=allBlogs.get(i).getId() %>"><%=allBlogs.get(i).getDescribe() %></a></p>
		                    <div class="row">
		                        <div class="col-xs-12 col-md-6">
		                            <p class="lead">

										<span class="label label-danger">博客|<%=allBlogs.get(i).getType() %></span></p>
		                        </div>
								<br>
		                        <div class="col-xs-12 col-md-6">
									<span class="glyphicon glyphicon-thumbs-up"></span><%=blogsMsg.get(i).getPriase() %>
									<span class="glyphicon glyphicon-eye-open"></span><%=blogsMsg.get(i).getVisit() %>
									<span class="glyphicon glyphicon-comment"></span><%=blogsMsg.get(i).getDiscuss() %>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		        
		        <%} %>
		        
		    </div>
		</div>
			
			</div>
			
			
			
		
		
		</div>
		
			
		
		</div>
		
		
	</main>

	<div id="search" class="cd-main-search">
		<form>
			<input id="search_input" type="search" placeholder="查找博客">

			<div class="cd-select">
				<span>类型</span>
				<select id="type_select" name="type">
					<option value="">所有类型</option>
					<option value="java">java</option>
					<option value="python">python</option>
					<option value="php">php</option>
					<option value="移动开发">移动开发</option>
					<option value="大数据">大数据</option>
					<option value="物联网">物联网</option>
					<option value="其他">其他</option>
				</select>
				<span class="selected-value">所有类型</span>
			</div>
		</form>

		<div class="cd-search-suggestions">
			<div class="news">
				<h3>最近查看（最多显示5条）</h3>
				<ul>
					<% if(historyBlogs != null){ for(int i = 0;i<historyBlogs.size();i++){%>
					<li>
						<input class="reid" type="hidden" value="<%=historyBlogs.get(i).getId() %>">
						<a class="image-wrapper" href="#0"><img src="source/img/user.png" alt="News image"></a>
						<h4><a class="cd-nowrap" href="showBlog?id=<%=historyBlogs.get(i).getId() %>"><%=historyBlogs.get(i).getTitle() %></a></h4>
						<time datetime="2020-06-08 21:59:00"><%=historyBlogs.get(i).getCreatedate() %></time>
						<h6 class="deleteRecord"><a href="#0"><time datetime="2016-01-12">删除记录</time></a></h6>
					</li>
					<% }}  %>
					
				</ul>
			</div> <!-- .news -->

			<div class="quick-links">
				<h3>更多</h3>
				<ul>
					
					<li><a href="#0">查看所有记录</a></li>
				</ul>
			</div> <!-- .quick-links -->
		</div> <!-- .cd-search-suggestions -->

		<a href="#0" class="close cd-text-replace">Close Form</a>
	</div> <!-- .cd-main-search -->
	<div class="cd-cover-layer"></div> <!-- cover main content when search form is open -->

	<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="source/js/Carousel.js"></script> 
	<script type="text/javascript">
		$(function(){
			Carousel.init($("#carousel"));
			$("#carousel").init();
		});
	</script>
	
	<script src="js/jquery-2.1.1.min.js"></script>
	<script src="source/js/main.js"></script> <!-- Resource jQuery -->
	<script src="source/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
		    $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
		    $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
			
		  //查询blog
		    $("#a_search").click(function(){
		    	var type = $("#type_select option:selected").val();
		    	var title = $("#search_input").val();
		    	if(title == ""){ 
		    		
		    	}else{
		    		window.location.href="searchBlog?type="+type+"&title="+title; 
		    	}
		    	
		    	
		    	
		    });
		});
	</script>
	<div class="related" style="height:150px;postion:fixed;bottom:0;    ">
		    <h4>MyBlog</h4>
		    
	</div>
</body>
</html>